<template>
  <!--报价单打印-->
    <div>
      <el-button type="primary" @click="handleWindowPrint( '#box', '报价单' )">浏览器方式下载</el-button>
      <el-button type="primary" @click="goBack">返回</el-button>
      <div id="box">
        <div style="height: 30px;"></div>
        <div class="body">
          <el-row style="border-bottom: 1px solid black;">
            <el-col :span="12"><span style="font-size: 18px;">优品有限公司</span></el-col>
            <el-col :span="12"><span style="font-size: 18px;">日期:{{nowtime}} </span></el-col>
          </el-row>
          <el-row style="margin-top: 10px;">
            <div style="border-bottom: 4px solid black;text-align: center;">
              <h1>报价单</h1>
              <div style="height: 10px;"></div>
            </div>
          </el-row>
          <el-form label-width="80px" :label-position="labelPosition" >
            <el-row>
              <el-col :span="13">
                <el-form-item label="报价单号:">
                  <div style="border-bottom: 1px solid black;width:65%;">
                    <span>
                      {{offerOne.offerNumber}}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="报价人:">
                  <div style="border-bottom: 1px solid black;width:75%;">
                    <span>{{offerOne.offerEmp.empName}}</span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="客户名称:">
                  <div style="border-bottom: 1px solid black;width:65%;">
                    <span>
                      {{offerOne.customerByCustomId.cusName}}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="联系人:">
                  <div style="border-bottom: 1px solid black;width:75%;">
                    <span>
                      {{offerOne.businessInfoByBusinesId.culinkmanByCupId.cupName}}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="电话:">
                  <div style="border-bottom: 1px solid black;width:65%;">
                    <span>
                      {{offerOne.businessInfoByBusinesId.culinkmanByCupId.cupPhone}}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="电子邮箱:">
                  <div style="border-bottom: 1px solid black;width:75%;">
                    <span> &nbsp  </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="13">
                <el-form-item label="付款说明:">
                  <div style="border-bottom: 1px solid black;width:65%;">
                    <span>
                      {{offerOne.paymentInstructions}}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="交通说明:">
                  <div style="border-bottom: 1px solid black;width:75%;">
                    <span> &nbsp  </span>
                  </div>
                </el-form-item>
              </el-col>
              <el-col>
                <el-form-item label="地址:">
                  <div style="border-bottom: 1px solid black;width:90%;">
                    <span>
                      {{offerOne.customerByCustomId.cusAddressProvince}}
                      {{offerOne.customerByCustomId.cusAddressArea}}
                      {{offerOne.customerByCustomId.cusAddressCity}}
                    </span>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="offer_ts">
            <h3 style="color:white">你好,感谢惠顾，现将贵公司所需商品报价如下</h3>
          </div>
          <div class="offer_products">
            <el-table
              :cell-style="cellstyle"
              :header-cell-style="rowclass"
              :data="offerTwo"
              style="width: 100%;
                        border: 1px solid #EBEEF5;margin-top: 20px">
              <el-table-column  prop="productside.zproductByProductId.productName"  label="产品名称" >
              </el-table-column>
              <el-table-column  prop="productside.zproductByProductId.prModel"   label="型号"  >
              </el-table-column>
              <el-table-column    label="售价">
                <template slot-scope="j">
                  {{j.row.prsPrice | formatMoney}}
                </template>
              </el-table-column>
              <el-table-column label="折扣%" prop="prsDiscount">
              </el-table-column>
              <el-table-column label="折后价" >
                <template slot-scope="j1">
                  {{j1.row.prsDiscountedPrice | formatMoney}}
                </template>
              </el-table-column>
              <el-table-column  label="数量" prop="prsNum" >
              </el-table-column>
              <el-table-column label="单位"   prop="productside.psUnit">
              </el-table-column>
              <el-table-column label="小计" >
                <template slot-scope="j2">
                  {{j2.row.prsCount | formatMoney}}
                </template>
              </el-table-column>
            </el-table>
          </div>
          <el-row style="height:40px">
            <p style="line-height: 35px">总计(大写):{{offerOne.productOffer |ToString}}</p>
          </el-row>
          <div class="remark" style="color:white">
           报价说明:
            <p class="line_height">1.本报价有效期30天,逾期请再次垂询</p>
            <p class="line_height">2.价格为含税保数,税率为10%增值税</p>
            <p class="line_height">3.发货时间,为签订合同后3个工作日内</p>
            <p class="line_height">4.付款方式,一般产品为60%以上预付款，特殊产品预付垂询</p>
          </div>
          <div style="height:40px;"> </div>
        </div>
      </div>
    </div>
</template>

<script>
    import htmlToPdf from '../assets/htmlToPdf'
    const libraryOption = [{id: 0, name: '家庭原因'}, {id: 1, name: '个人发展'}, {id: 2, name: '薪资福利'},
        {id: 3, name: '工作环境'}, {id: 4, name: '工作时间'}, {id: 5, name: '身体健康'}]
    const calendarTypeKeyValue = libraryOption.reduce((acc, cur) => {
        acc[cur.id] = cur.name
        return acc
    }, {})
    export default {
        data () {
            // 和导出pdf没关系
            return {
              labelPosition:'left',
                nowtime:'',//日期

              offerOne:{
                offer_id2:0,
                offerTitle:'',
                offerNumber:'',
                productOffer:'',
                paymentInstructions:'',
                transportInstructions:'',
                offerStatus:'',
                offerRemarks:'',
                profit:'',
                offerEmp:{
                  empName:''
                },
                customerByCustomId:{
                  cusName:'',
                  cusAddressProvince:'',
                  cusAddressCity:'',
                  cusAddressArea:''
                },
                businessInfoByBusinesId:{
                  businessName:'',
                  culinkmanByCupId:{
                    cupName:'',
                    cupPhone:'',
                  }
                }
              },
              offerTwo:[],
                leaveData: {
                    dimId: ''
                },
                approvalLogs: []
            }
        },
        filters: {
            typeFilter (type) {
                return calendarTypeKeyValue[type]
            },
           ToString(n) {

            if (!/^(0|[1-9]\d*)(\.\d+)?$/.test(n)){
              return "数据非法";  //判断数据是否大于0
            }

            var unit = "千百拾亿千百拾万千百拾元角分", str = "";
            n += "00";

            var indexpoint = n.indexOf('.');  // 如果是小数，截取小数点前面的位数

            if (indexpoint >= 0){

              n = n.substring(0, indexpoint) + n.substr(indexpoint+1, 2);   // 若为小数，截取需要使用的unit单位
            }

            unit = unit.substr(unit.length - n.length);  // 若为整数，截取需要使用的unit单位
            for (var i=0; i < n.length; i++){
              str += "零壹贰叁肆伍陆柒捌玖".charAt(n.charAt(i)) + unit.charAt(i);  //遍历转化为大写的数字
            }

            return str.replace(/零(千|百|拾|角)/g, "零").replace(/(零)+/g, "零").replace(/零(万|亿|元)/g, "$1").replace(/(亿)万|壹(拾)/g, "$1$2").replace(/^元零?|零分/g, "").replace(/元$/g, "元整"); // 替换掉数字里面的零字符，得到结果
          },
          formatMoney(val) {
            val = val.toString().replace(/\$|\,/g, "");
            if (isNaN(val)) {
              val = "0";
            }
            let sign = (val == (val = Math.abs(val)));
            val = Math.floor(val * 100 + 0.50000000001);
            let cents = val % 100;
            val = Math.floor(val / 100).toString();
            if (cents < 10) {
              cents = "0" + cents;
            }
            for (let i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
              val = val.substring(0, val.length - (4 * i + 3)) + "," + val.substring(val.length - (4 * i + 3));
            }
            return (((sign) ? "" : "-") + val + "." + cents);
          }

        },
        created () {

          this.offer1(this.$route.query.offerId);
          this.getNowTime();
        },
        methods: {
          offer1(offerId){
            this.$axios.get("http://localhost:8088/buDetailsTwo/offerOne",
              {params:{offerId:offerId}}).then(v=>{
              this.offerOne=v.data;
            }).catch();
            this.$axios.get("http://localhost:8088/buDetailsTwo/offerTwo",
              {params:{offerId:offerId}}).then(v=>{
              this.offerTwo=v.data;
            }).catch();
          },
            /*默认今天*/
            getNowTime() {
                var now = new Date();
                var year = now.getFullYear(); //得到年份
                var month = now.getMonth(); //得到月份
                var date = now.getDate(); //得到日期
                month = month + 1;
                month = month.toString().padStart(2, "0");
                date = date.toString().padStart(2, "0");
                var defaultDate = `${year}年${month}月${date} 日`;
                this.nowtime=defaultDate;
            },
            rowclass(){
                return "text-align:center"
            },
            cellstyle(){
                return "text-align:center"
            },

            handleWindowPrint (ele, fileName) {
                document.body.innerHTML = document.querySelector(ele).outerHTML
                // 转异步 等待dom元素渲染（样式）完毕在打印
                setTimeout(() => {
                    // 打印
                    window.print()
                    // 刷新页面
                    window.location.reload()
                }, 20)
            },
            goBack () {
                this.$router.go(-1)
            },
        }
    }
</script>

<style scoped>
  #box{
    width:65%;
    background: white;
    height:100%;
    margin: 0 auto;
    box-shadow:#ccc 0px 0px 10px;
  }

  .body{
    width:90%;
    margin: 0 auto;

  }
  .el-form-item{
    margin-bottom: 0px;
  }
  .offer_ts{
    height:62px;
    background: #4FA1E4;
    margin-top:20px;
  }
  .offer_ts h3{
    line-height: 40px;
    margin-left: 10px;
  }
  .offer_products{
    margin-top: -40px;
  }
  .remark{
    background: #4FA1E4;
  }
  .line_height{
    line-height: 32px;
  }

  .table_style td,th {
    padding: 10px;
    font-size: 15px;
  }


</style>
